<template>
  <a-drawer
    v-model:visible="visible"
    class="custom-class"
    :closable="false"
    :keyboard="false"
    :maskStyle="{ background: 'transparent' }"
    title="新建任务"
    placement="right"
    :get-container="() => $parent?.$refs?.pipelineConfigRef"
    width="500px"
    :body-style="{ padding: '16px 0', overflow: 'hidden' }"
    destroyOnClose
  >
    <template #extra>
      <close-outlined @click="hideDrawer" />
    </template>
    <div class="drawer-content">
      <div class="task_search">
        <a-input placeholder="请输入任务名称搜索" v-model="searchText" allowClear @change="searchChange">
          <template #prefix>
            <SearchOutlined style="color: #6b84a5" />
          </template>
        </a-input>
      </div>
      <div class="task_anchor" v-if="steps && steps.length > 0">
        <!-- Anchor 锚点 -->
        <div class="task_anchor_left">
          <a-anchor :affix="false" :get-container="getContainer" @click="handleClickAnchor">
            <a-anchor-link v-for="item in steps" :key="item.typeCode" :href="'#' + item.typeCode">
              <template #title>
                <div class="task_anchor_left_title">{{ item.typeName }}</div>
              </template>
            </a-anchor-link>
          </a-anchor>
        </div>
        <div class="task_anchor_right">
          <div class="task_anchor_right_content">
            <div v-for="item in steps" :key="item.typeCode" :id="item.typeCode" class="task_anchor_right_content_box">
              <div class="task_anchor_right_content_box_title">{{ item.typeName }}</div>
              <div class="task_anchor_right_content_box_content">
                <div
                  v-for="(data, dataIndex) in item.taskInfoList"
                  :key="data.taskCode"
                  :class="{ itemActive: currentStep == `${item.typeCode + dataIndex}` }"
                  @click="handleSelectItem(data, item.typeCode + dataIndex)"
                  class="task_anchor_right_content_box_content_item"
                  :title="data.taskName"
                >
                  <span class="task_anchor_right_content_box_content_item_icon"> {{ '&lt;/&gt;' }} </span>
                  <span class="task_anchor_right_content_box_content_item_name ellipsis">{{ data.taskName }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <BasicEmpty v-else />
    </div>
  </a-drawer>
</template>
<script lang="ts" setup>
import { SearchOutlined, CloseOutlined } from '@ant-design/icons-vue';
import { cloneDeep } from 'lodash';

const props = defineProps({
  data: {
    type: Array<Pipeline.TaskDefResult>,
    default: () => [],
  },
});
const visible = ref<boolean>(false);
const showDrawer = () => {
  currentStep.value = '';
  searchText.value = '';
  steps.value = fuzzySearch(searchText.value);
  visible.value = true;
};

const hideDrawer = () => {
  visible.value = false;
};

const steps = ref<Pipeline.TaskDefResult[]>();
const emits = defineEmits(['handleAddTask']);
let stepsCopy: Pipeline.TaskDefResult[] = [];
const searchText = ref<string>('');
const currentStep = ref<string>('');

watch(
  () => props.data,
  (newVal) => {
    steps.value = newVal;
    stepsCopy = cloneDeep(steps.value);
  },
  { immediate: true },
);
const getContainer = () => {
  return document.querySelector('.task_anchor_right_content') as any;
};
const handleClickAnchor = (e: any, link: any) => {
  e.preventDefault();
  if (link.href) {
    const element = document.querySelector(link.href);
    element && element.scrollIntoView({ block: 'start', behavior: 'smooth', alignToTop: 'false' });
  }
};

const handleSelectItem = (data: Pipeline.TaskInfo, index: string) => {
  currentStep.value = index;
  hideDrawer();
  emits('handleAddTask', data);
};

const searchChange = (e: any) => {
  searchText.value = e.target.value;
  steps.value = fuzzySearch(searchText.value);
};

const fuzzySearch = (searchText: string) => {
  const result = [];
  for (let i = 0; i < stepsCopy.length; i++) {
    const step = cloneDeep(stepsCopy[i]);
    const taskInfoList = step.taskInfoList.filter((item: Pipeline.TaskInfo) => item.taskName.includes(searchText));
    step.taskInfoList = taskInfoList;
    if (taskInfoList.length > 0) {
      result.push(step);
    }
  }
  return result;
};

defineExpose({
  showDrawer,
  hideDrawer,
});
</script>
<style lang="less" scoped>
.task_search {
  padding: 0 20px 16px;
}
.task_anchor {
  display: flex;
  width: 100%;
  height: 100%;
  &_left {
    width: 130px;
    height: calc(100vh - 207px);
    border-right: 1px solid #e7eff8;
    &_title {
      width: 100%;
      height: 40px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
  &_right {
    flex: 1;
    padding: 0 0 0 20px;
    &_content {
      width: 100%;
      height: calc(100vh - 335px);
      overflow: auto;
      &_box {
        width: 100%;
        height: auto;
        overflow: hidden;
        padding: 0 20px 24px 0;
        text-align: left;
        &_title {
          font-size: 14px;
          color: rgba(0, 0, 0, 0.4);
          font-weight: 600;
          margin-bottom: 12px;
        }
        &_content {
          width: 100%;
          display: grid;
          grid-template-columns: 1fr 1fr;
          grid-gap: 10px;
          &_item {
            width: 100%;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1px solid #e7eff8;
            cursor: pointer;
            border-radius: 4px;
            &:hover {
              box-shadow: 1px 1px 4px 0 #e7eff8;
            }
            &_icon {
              font-size: 14px;
              color: #6b84a5;
              margin-right: 10px;
              display: inline-block;
              width: 30%;
              text-align: center;
            }
            &_name {
              font-size: 14px;
              color: rgba(0, 0, 0, 0.8);
              font-weight: 400;
              display: inline-block;
              width: 70%;
              max-width: 90px;
            }
          }
        }
      }
    }
  }
}

:deep(.ant-anchor) {
  padding: 0;
}

:deep(.ant-anchor-ink) {
  display: none;
}

:deep(.ant-anchor-link-active) {
  .task_anchor_left_title {
    background-color: #e9f3ff;
    position: relative;
    &:before {
      background-color: #2590ff;
      bottom: 0;
      width: 2px;
      height: 100%;
      content: '';
      position: absolute;
      right: 0;
      top: 0;
    }
  }
}

:deep(.ant-anchor-link) {
  padding: 0;
}

:deep(.ant-anchor-link-active > .ant-anchor-link-title) {
  color: #000;
}

:deep(.ant-input-affix-wrapper) {
  border-radius: 4px;
}

.itemActive {
  border: 1px solid #2590ff;
}
</style>
